<template>
  <el-dialog title="添加风险对象" :visible.sync="visible" width="50%" :before-close="handleClose">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-position="right">
      <el-form-item label="风险分析对象" :label-width="formLabelWidth" prop="ONAME">
        <el-input v-model="ruleForm.ONAME" placeholder="请输入风险分析对象" style="width:100%;" />
      </el-form-item>
      
      <el-form-item label="分类" :label-width="formLabelWidth" prop="OTYPE">
        <el-select v-model="ruleForm.OTYPE" placeholder="请选择" style="width:100%;">
          <el-option v-for="item in OTYPESelect" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="编码" :label-width="formLabelWidth" prop="HAZARD_COD">
        <el-input v-model="ruleForm.HAZARD_COD" placeholder="请输入编码" style="width:100%;" />
      </el-form-item>

      <el-form-item label="是否重大危险源" :label-width="formLabelWidth" prop="OIFRISK">
        <el-radio-group v-model="ruleForm.OIFRISK" @change="handleOIFRISKChange">
          <el-radio label="0">是</el-radio>
          <el-radio label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="责任部门" :label-width="formLabelWidth" prop="HAZARD_DEP">
        <el-input v-model="ruleForm.HAZARD_DEP" placeholder="请输入责任部门" style="width:100%;" />
      </el-form-item>

      <el-form-item label="操作责任人" :label-width="formLabelWidth" prop="CZ_HAZARD_PERSON">
        <el-input v-model="ruleForm.CZ_HAZARD_PERSON" placeholder="请输入操作责任人" style="width:100%;" />
      </el-form-item>

      <el-form-item label="操作责任人-职责" :label-width="formLabelWidth" prop="CZ_LIABLE_DUTY">
        <el-input v-model="ruleForm.CZ_LIABLE_DUTY" placeholder="请输入操作责任人职责" style="width:100%;" />
      </el-form-item>

      <template v-if="showExtraFields">
        <el-form-item label="技术责任人" :label-width="formLabelWidth" prop="JS_HAZARD_PERSON">
          <el-input v-model="ruleForm.JS_HAZARD_PERSON" placeholder="请输入技术责任人" style="width:100%;" />
        </el-form-item>

        <el-form-item label="技术责任人-职责" :label-width="formLabelWidth" prop="JS_LIABLE_DUTY">
          <el-input v-model="ruleForm.JS_LIABLE_DUTY" placeholder="请输入技术责任人职责" style="width:100%;" />
        </el-form-item>

        <el-form-item label="主要责任人" :label-width="formLabelWidth" prop="HAZARD_LIABLE_PERSON">
          <el-input v-model="ruleForm.HAZARD_LIABLE_PERSON" placeholder="请输入主要责任人" style="width:100%;" />
        </el-form-item>

        <el-form-item label="主要责任人-职责" :label-width="formLabelWidth" prop="HAZARD_LIABLE_DUTY">
          <el-input v-model="ruleForm.HAZARD_LIABLE_DUTY" placeholder="请输入主要责任人职责" style="width:100%;" />
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddDevice',
  data() {
    return {
      visible: false,
      formLabelWidth: '150px',
      showExtraFields: false,
      ruleForm: {
        ONAME: '',
        OTYPE: '',
        HAZARD_COD: '',
        OIFRISK: '1',
        HAZARD_DEP: '',
        CZ_HAZARD_PERSON: '',
        CZ_LIABLE_DUTY: '',
        JS_HAZARD_PERSON: '',
        JS_LIABLE_DUTY: '',
        HAZARD_LIABLE_PERSON: '',
        HAZARD_LIABLE_DUTY: ''
      },
      OTYPESelect: [
        { value: '1', label: '类型1' },
        { value: '2', label: '类型2' }
      ],
      rules: {
        ONAME: [{ required: true, message: '请输入风险分析对象', trigger: 'blur' }],
        OTYPE: [{ required: true, message: '请选择分类', trigger: 'change' }],
        HAZARD_COD: [{ required: true, message: '请输入编码', trigger: 'blur' }],
        OIFRISK: [{ required: true, message: '请选择是否重大危险源', trigger: 'change' }],
        HAZARD_DEP: [{ required: true, message: '请输入责任部门', trigger: 'blur' }],
        CZ_HAZARD_PERSON: [{ required: true, message: '请输入操作责任人', trigger: 'blur' }],
        CZ_LIABLE_DUTY: [{ required: true, message: '请输入操作责任人职责', trigger: 'blur' }],
        JS_HAZARD_PERSON: [{ 
          required: true, 
          message: '请输入技术责任人', 
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (this.ruleForm.OIFRISK === '0' && !value) {
              callback(new Error('请输入技术责任人'))
            } else {
              callback()
            }
          }
        }],
        JS_LIABLE_DUTY: [{ 
          required: true, 
          message: '请输入技术责任人职责', 
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (this.ruleForm.OIFRISK === '0' && !value) {
              callback(new Error('请输入技术责任人职责'))
            } else {
              callback()
            }
          }
        }],
        HAZARD_LIABLE_PERSON: [{ 
          required: true, 
          message: '请输入主要责任人', 
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (this.ruleForm.OIFRISK === '0' && !value) {
              callback(new Error('请输入主要责任人'))
            } else {
              callback()
            }
          }
        }],
        HAZARD_LIABLE_DUTY: [{ 
          required: true, 
          message: '请输入主要责任人职责', 
          trigger: 'blur',
          validator: (rule, value, callback) => {
            if (this.ruleForm.OIFRISK === '0' && !value) {
              callback(new Error('请输入主要责任人职责'))
            } else {
              callback()
            }
          }
        }]
      }
    }
  },
  methods: {
    handleOIFRISKChange(value) {
      this.showExtraFields = value === '0'
    },
    show() {
      this.visible = true
    },
    handleClose() {
      this.$refs.ruleForm?.resetFields()
      this.ruleForm = { ...this.ruleForm }
      this.showExtraFields = false
      this.visible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // TODO: 调用添加接口
          this.$message.success('添加成功')
          this.$emit('success') // 通知父组件刷新数据
          this.handleClose()
        } else {
          return false
        }
      })
    }
  }
}
</script> 